<!DOCTYPE html>
<html>
<head>
    @include("/include/_header.html", {'title':'测试背景'}){}
    <meta charset="utf-8">
    <title>全端复杂组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctxPath}/baotou-steel/craneWork/css/CraneWorkPublic.css" media="all">

</head>
<body>
<div class="layui-row">
    <div class="layui-col-md4">
        <div class="layui-row grid-demo">
            <div class="layui-col-md12" style="height: 16vh">
            </div>

            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-card" style="height : 24vh">
                    <div class="layui-card-body task-status">
                        <label class="task-data-label" for="nowStatus">当前状态</label>
                        <input class="task-data-container" type="text" id="nowStatus" value="运行中">

                        <label class="task-data-label" for="nowMode">当前模式</label>
                        <input class="task-data-container" type="text" id="nowMode" value="下线">

                        <label class="task-data-label" for="nowTask">当前任务</label>
                        <input class="task-data-container" type="text" id="nowTask" value="下线">


                        <label class="task-data-label" for="nowStep">当前步骤</label>
                        <input class="task-data-container" type="text" id="nowStep" style="width:100px !important;" value="吸板">

                        <label class="task-data-label" style="width: 16vh" for="nowSteel">当前任务吸取张数</label>
                        <input class="task-data-container" type="text" id="suckSteelNum" style="width: 180px !important;" value="">
                        <label class="task-data-label" for="nowSteel">当前钢板</label>
                        <input class="task-data-container" type="text" id="nowSteel" style="width: 160px !important;" value="233432133456">
                        <button  lay-submit id="steelInfoUpdate" lay-filter="steelInfoUpdate"
                                 style="width:60px !important;display: inline;height: 2.5vh; font-size: 21px; text-align: center" data-type="steelInfoUpdate">更正
                        </button>

                    </div>
                </div>
                <input class="task-data-container" type="text" id="unnormalStatus" style="width: 400px !important;color: red;margin-top: -8px !important;font-size: 15px !important;" value="非正常状态显示区">
            </div>

            <div class="layui-col-md12" style="height: 14vh">
            </div>

            <div class="layui-col-md8 layui-col-md-offset1 " style="height: 52vh">
                <div class="layui-card" style="height : 47vh">
                    <div class="layui-card-body device-status">

                        <label class="data-label" for="runMode">运行模式</label>
                        <input class="data-container" type="text" id="runMode"  value="">


                        <label class="data-label" for="craneXVal">大车位置</label>
                        <input class="data-container" type="text" id="craneXVal" value="">


                        <label class="data-label" for="craneZVal">起升高度</label>
                        <input class="data-container" type="text" id="craneZVal"  value="">

                        <label class="data-label" for="isFault">是否故障</label>
                        <input class="data-container" type="text" id="isFault"  value="">

                        <label class="data-label" for="rollerLock">辊道锁定</label>
                        <input class="data-container" type="text" id="rollerLock"  value="">

                        <label class="data-label" for="suckSteel">吊具吸板</label>
                        <input class="data-container" type="text" id="suckSteel" value="">
                        <label class="data-label" for="rollerReady">辊道就位</label>
                        <input class="data-container" type="text" id="rollerReady"  value="">
                        <label class="data-label" for="rollerReady">辊道选择</label>
                        <input class="data-container" type="text" id="selectSignal"  value="">
                    </div>
                </div>
                <div class="layui-card" style="height : 5vh">
                    <div class="layui-card-body">
                        <button class="layui-btn layui-btn-normal big-btn" lay-submit id="avoid" lay-filter="avoid"
                                style="display: inline">避让
                        </button>
                        <button class="layui-btn layui-btn-normal big-btn" lay-submit id="unlock" lay-filter="unlock"
                                style="display: inline">辊道解锁
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-col-md8">
        <div class="layui-row grid-demo grid-demo-bg1">
            <div class="layui-col-md11" style="height: 13vh">
            </div>

            <div class="layui-col-md11">
                <div class="layui-card" style="height : 64vh">
                    <div class="layui-card-body">
                        <div class="pixiArea" id="craneAnimate">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md11" style="margin-left:30px;height: 0vh">
            </div>
            <div class="layui-col-md11" style="margin-left:30px;">
                <div class="layui-card" style="height : 9vh">
                    <div class="layui-card-body">
                        <from class="layui-form big-font" action="">
                            <div class="layui-inline">
                                <div class="layui-inline">
                                    <div class="layui-form-item" >
                                        <label class="layui-form-label">磁块选择：</label>
                                        <div class="layui-input-block big-layui-input-block">
                                            <input type="checkbox" name="magnet" id="magnetBlock1" lay-filter="magnet" lay-skin="primary" value="1" title="1">
                                            <input type="checkbox" name="magnet" id="magnetBlock2" lay-filter="magnet" lay-skin="primary" value="2" title="2">
                                            <input type="checkbox" name="magnet" id="magnetBlock3" lay-filter="magnet" lay-skin="primary" value="3" title="3">
                                            <input type="checkbox" name="magnet" id="magnetBlock4" lay-filter="magnet" lay-skin="primary" value="4" title="4">
                                            <input type="checkbox" name="magnet" id="magnetBlock5" lay-filter="magnet" lay-skin="primary" value="5" title="5">
                                            <input type="checkbox" name="magnet" id="magnetBlock6" lay-filter="magnet" lay-skin="primary" value="6" title="6">
                                            <input type="checkbox" name="magnet" id="magnetBlock7" lay-filter="magnet" lay-skin="primary" value="7" title="7">
                                            <input type="checkbox" name="magnet" id="magnetBlock8" lay-filter="magnet" lay-skin="primary" value="8" title="8">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="margin-left :0">磁力：</label>
                                        <input type="number" class="layui-input" id="magnetValue"
                                               name="magnetValue"
                                               lay-verify="required"
                                               lay-filter="" required lay-verify="required" autocomplete="off"
                                               style="margin-left :0;width: 70px;display: inline" value="100"/>

                                    </div>
                                </div>

                            </div>
                            <div class="layui-inline">
                                <div class="layui-inline">
                                    <div class="layui-form-item" >
                                        <label class="layui-form-label">磁块电流：</label>
                                        <div class="layui-input-block big-layui-input-block">
                                            <input type="text" style="width: 43px;" id="magnetBlockVal1" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal2" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal3" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal4" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal5" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal6" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal7" lay-filter="magnet" lay-skin="primary" disabled>
                                            <input type="text" style="width: 43px;" id="magnetBlockVal8" lay-filter="magnet" lay-skin="primary" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">工作模式：</label>
                                        <input type="radio" id="offlineMode" name="selectWorkModel" value="offline"
                                               title="下线"
                                               lay-filter="WorkModeRadio" checked>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="margin-left :0">吸取张数：</label>
                                        <input type="number" class="layui-input" id="sheetNumberInput"
                                               name="sheetNumber" disabled
                                               lay-verify="required"
                                               lay-filter="" required lay-verify="required" autocomplete="off"
                                               style="margin-left :0;width: 45px;display: inline" value="1"/>

                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="margin-left :0">堆放张数：</label>
                                        <input type="number" class="layui-input" id="stockNumberInput"
                                               name="stockNumber"
                                               lay-verify="required"
                                               lay-filter="" required lay-verify="required" autocomplete="off"
                                               style="margin-left :0;width: 75px;display: inline;text-align: centerxi" value="1"/>

                                    </div>
                                </div>
                                <!--<div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="margin-left :0">垛位选择：</label>
                                        <div class="layui-input-inline">
                                            <div class="layui-col-md6">
                                                <select name="stock" lay-verify="" style="margin-left :0;">
                                                    <option value="1" selected="">垛位1</option>
                                                    <option value="2" >垛位2</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
                            </div>

                            <div class="layui-col-md11" style="margin-left:30px;height: 9vh">
                            </div>

                            <div class="layui-inline" style="margin-left :-200px;">
                                <div class="layui-inline" >
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" >
                                            <label style="font-size: 28px;font-weight: bold;">自动：</label>
                                            <button class="layui-btn custom-btn big-btn" lay-submit lay-filter="startTask"
                                                    style="display: inline">开始任务
                                            </button>
                                            <button class="layui-btn layui-btn-danger custom-btn big-btn" lay-submit lay-filter="stopTask"
                                                    style="display: inline">停止任务
                                            </button>


<!--                                            <label style="font-size: 20px;font-weight: bold;">半自动：</label>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="move1"-->
<!--                                                    style="display: inline">移动到辊道-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="suck2"-->
<!--                                                    style="display: inline">吸板-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="move3"-->
<!--                                                    style="display: inline">移动到垛位-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="place4"-->
<!--                                                    style="display: inline">放板-->
<!--                                            </button>-->
                                            <button class="layui-btn layui-btn-normal  big-btn" lay-submit id="pause" lay-filter="pause"
                                                    style="margin-left:10px;display: inline">暂停
                                            </button>
                                            <button class="layui-btn layui-btn-normal  big-btn" lay-submit id="goon" lay-filter="goon"
                                                    style="display: inline">继续
                                            </button>

                                        </div>
                                    </div>

<!--                                    <div class="layui-form-item">-->
<!--                                        <div class="layui-input-block" >-->
<!--                                            <label style="font-size: 20px;font-weight: bold;">自由半自动：</label>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="move1Plus"-->
<!--                                                    style="display: inline">移动到辊道-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="suck2Plus"-->
<!--                                                    style="display: inline">吸板-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="move3Plus"-->
<!--                                                    style="display: inline">移动到垛位-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn custom-btn" lay-submit lay-filter="place4Plus"-->
<!--                                                    style="display: inline">放板-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn layui-btn-normal layui-btn-disabled" lay-submit id="pausePlus" lay-filter="pausePlus"-->
<!--                                                    style="margin-left:10px;display: inline">暂停-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn layui-btn-normal layui-btn-disabled" lay-submit id="goonPlus" lay-filter="goonPlus"-->
<!--                                                    style="display: inline">继续-->
<!--                                            </button>-->
<!--                                            <button class="layui-btn layui-btn-normal layui-btn-disabled" lay-submit id="terminatePlus" lay-filter="terminatePlus"-->
<!--                                                    style="display: inline">中止-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                                <div class="layui-inline" >
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" >
                                            <label style="font-size: 28px;font-weight: bold;">自由半自动：</label>
                                            <button class="layui-btn custom-btn big-btn" lay-submit lay-filter="move1Plus"
                                                    style="display: inline">移动到辊道
                                            </button>

                                            <button class="layui-btn custom-btn big-btn" lay-submit lay-filter="move3Plus"
                                                    style="display: inline">移动到垛位
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </from>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/externaljs/pixijs/pixi.min.js"></script>
<script src="${ctxPath}/baotou-steel/craneWork/craneWorkPublic.js"></script>
<script src="${ctxPath}/externaljs/sockjs/sockjs.min.js"></script>
<script src="${ctxPath}/externaljs/stompjs/stomp.min.js"></script>
<script src="${ctxPath}/externaljs/websocket/app-websocket.js"></script>
<script src="${ctxPath}/externaljs/tweenmax/TweenMax.js"></script>

@include("/include/_container.html", {'js':'/baotou-steel/craneWork/FifthCraneWork.js'}){}
</body>
<style>
    body {
        background-image: url("${ctxPath}/baotou-steel/craneWork/images/FifthCrane/background.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
    }
    input{
        margin-top: 0px !important;
        height: 27px !important;
    }

</style>
</html>